<template>
  <div style="height: 100%">

    <div style="height: 100%">

      <!--    单篇文章-->
      <div class="single_article shadow" v-for="the_article in the_article_lists"
           @click="toArticleDetails(the_article.aid)">
        <!--      标题-->
        <div align="center">
          <a href="" style="font-size: 2em;color: #000000">{{the_article.theTitle}}</a>
        </div>
        <!--      简单数据-->
        <div align="center"
             style="font-size: 1.0em;color: #5f636c;padding-bottom: 5em;margin-top: 1em">
          <i class="el-icon-time"/> {{the_article.updateTime}}
          <el-divider direction="vertical"/>
          <i class="el-icon-ice-cream-square"/> {{the_article.thumbUpFor}}
          <el-divider direction="vertical"/>
          神奇的数字: {{the_article.browseTheNumber}}
        </div>
        <!--      内容-->
        <div style="padding-bottom: 5em">
          {{the_article.briefContent}}
        </div>
        <div align="center">
          <router-link :to="{
       path: '/theArticleDetails',
       query: {aid: the_article.aid}}" style="border-style: solid;
         border-width: 2px 2px;
         color: #000000;padding: 0.3em;
         margin-bottom: 2%">
            查看全文>>
          </router-link>
        </div>
      </div>

    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        the_article_lists: [],

      };
    },
    mounted() {
      // let that = this;

    },
    created() {
      const that = this;

       const { key } = that.$route.query;

      that.$http.post(`${that.SEARCH_API}/${key}`).then((res) => {
        console.log('JSON.stringify(res)>>', res);
        that.the_article_lists = res.data.result;
      });
    },
    methods: {
      toArticleDetails(e) {

      },
    },
  };


</script>

<style>

  /*单篇文章*/
  .single_article {
    background-color: #ffffff;
    padding: 3%;
    margin-bottom: 3%;
  }

  html, body {
    margin: 0;
    height: 100%;
    width: 100%;
  }


</style>
